<template>
  <div class="container">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form
          :inline="true"
          :model="filterField"
          ref="searchConditions"
          label-width="110px"
        >
          <el-col :lg="8" :xl="6">
            <el-form-item label="反映人" class="row-padding-bottom">
              <el-input
                v-model="filterField.name"
                placeholder="请填写反映人姓名"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="反映人联系方式" class="row-padding-bottom">
              <el-input
                v-model="filterField.perTel"
                placeholder="请填写反映人联系方式"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="收件日期" class="row-padding-bottom">
                <timeSelection
                  @getStartTimeValue="getStartTimeValue"
                  @getEndTimeValue="getEndTimeValue"
                ></timeSelection>
              </el-form-item>
            </el-col>
          </template>
          <el-form-item label="">
            <a
              @click="toggleAdvanced"
              style="margin-left: 40px; color: #409eff; cursor: pointer"
              class="btnColor"
            >
              {{ advanced ? '收起' : '展开' }}
              <i
                :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </a>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div class="proDetailsListBox">
        <div class="colSetupBottom">
          <el-button
            class="commonBut saveBtn funComBut"
            @click="openPersonDialog"
          >
            <span class="opetareText">指定责任人</span>
          </el-button>
        </div>
        <el-table
          @sort-change="sortChange"
          :max-height="tableHeight"
          :data="tableList"
          @selection-change="handleSelectionChange"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            prop="backPayNumber"
            label="编号"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="收件时间"
            sortable="custom"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="complaintRemark"
            label="欠薪诉求"
            :formatter="formatTd"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.complaintRemark"
                :columnName="'complaintRemark'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="反映人"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="perTel"
            label="反映人联系方式"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column label="操作" align="left" fixed="right">
            <template slot-scope="scope">
              <el-link type="primary" @click="openSinglePerson(scope.row)"
                >指定责任人</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
      <!-- 指定责任人弹窗 -->
      <dialog-person
        :showTaskProp="showPerson"
        @callback="handleClosePerson"
        :childData="caseInfo"
        :ids="ids"
      />
    </div>
  </div>
</template>
<script>
import DialogPerson from './dialogPersonLzh.vue'
export default {
  components: { DialogPerson },
  name: 'toAssignCaseLzh',
  data() {
    return {
      titleText: '待指派欠薪诉求',
      advanced: false,
      tableHeight: null,
      filterField: {
        isNoAssign: 1,
        name: '',
        perTel: '',
        department: '',
        startDateStr: '',
        endDateStr: '',
      },
      applyDate: [],
      tableList: [],
      requestUrl: 'api-r/ezrightbackpay/expand/list',
      showTask: false,
      showPerson: false,
      activedList: [],
      caseInfo: {},
      ids: [],
    }
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  mounted() {
    this.$nextTick(function () {
      this.tableHeight = window.innerHeight - 324
      // 监听窗口大小变化
      let self = this
      window.onresize = function () {
        self.tableHeight = window.innerHeight - 324
      }
    })
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    getStartTimeValue(val) {
      if (val) {
        this.filterField.startDateStr = val
      } else {
        this.filterField.startDateStr = ''
      }
    },
    getEndTimeValue(val) {
      if (val) {
        this.filterField.endDateStr = val
      } else {
        this.filterField.endDateStr = ''
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    handleSelectionChange(val) {
      console.log(val)
      this.activedList = val
    },
    openPersonDialog() {
      if (this.activedList.length) {
        this.caseInfo = {}
        let arr = []
        this.activedList.forEach((item) => {
          arr.push(item.id)
        })
        this.ids = arr
        console.log(this.ids)
        this.showPerson = true
      } else {
        this.$message({
          type: 'warning',
          message: '请勾选需要指定的诉求',
        })
      }
    },
    openSinglePerson(item) {
      this.caseInfo = item
      this.ids = []
      this.showPerson = true
    },
    handleClosePerson(val) {
      this.showPerson = false
      if (val.success) {
        this.$refs.pagination.getTableListData()
      }
    },
    getExportList() {
      let { isNoAssign, name, perTel, department, startDateStr, endDateStr } =
        this.filterField
      let arr = this.applyDate
      if (applyDate) {
        startDateStr = this.applyDate[0]
        endDateStr = this.applyDate[1]
      } else {
        startDateStr = ''
        endDateStr = ''
      }
    },
  },
}
</script>
<style lang="less" scoped>
.mainCon {
  top: 198px;
  .proDetailsListBox {
    padding: 24px;
    background: #fff;
    .colSetupBottom {
      margin-bottom: 24px;
      float: left;
      .colSetupBtn {
        float: left;
        margin-right: 20px;
      }
      /deep/ button.el-button.commonBut.saveBtn.funComBut.el-button--default {
        float: right;
      }
    }
  }
}

@import '../../../static/css/filterArea.less';
</style>
